<template>
  <el-dialog :close-on-click-modal="false"
             :modal-append-to-body='false'
             lock-scroll
             :title="dialogTitle"
             width="480px"
             :visible.sync="exportDialog">
    <el-form class="m7-form" :model="dialogFrom" label-position="top" size="mini">
      <div class="sound-count-wrap">数量： <span class="sound-count">{{dialogFrom.count}}条</span></div>
      <el-form-item label="" prop="comment" v-if="currentAction">
         <el-radio-group v-model="dialogFrom.exportIvr">
          <el-radio :label="false">不导出IVR轨迹</el-radio>
          <el-radio :label="true">同时导出IVR轨迹</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="comment">
        <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="dialogFrom.comment"
                maxlength="100"
                rows="3"
                show-word-limit>
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="exportDialog=false" size="mini">取消</el-button>
      <el-button type="primary" size="mini" @click.stop="dialogSave">确定</el-button>
    </div>
  </el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Emit } from 'vue-property-decorator'
interface DialogFromObject {
  comment: string,
  count: number,
  exportIvr: boolean
}
@Component({ name: 'ExportDialog', components: {} })
export default class ExportDialog extends Vue {
  [x: string]: any
  private exportDialog: boolean = false // 导出的弹窗
  private dialogTitle: string = '提示'
  private dialogFrom: DialogFromObject = { // 导出的弹窗中的表单： 备注 && 数量
    comment: '',
    count: 0,
    exportIvr: false
  }

  private currentAction: boolean = false // 导出记录显示ivr否则不显示

  public setDialogData (data: any) { // 由父级调用，打开或关闭窗口时
    if (data.currentAction === 'handleExportRecord') {
      this.currentAction = true
    } else {
      this.currentAction = false
    }
    this.exportDialog = data.exportDialog || false
    this.dialogFrom.count = data.count || 0
    if (this.exportDialog) {
      this.dialogTitle = data.dialogTitle
      this.dialogFrom.comment = ''
    }
  }

  @Emit()
  private dialogSave () { // 保存操作
    return this.dialogFrom
  }
}
</script>
<style lang="stylus" scoped>
  .sound-count-wrap
    margin-bottom 20px
    font-size 12px
    .sound-count
      color $fc-gray3
</style>
